<!-- 高级设置中引用类型展示树节点的弹窗 -->
<template>
  <div>
    <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
      <el-tab-pane label="全局数据模型" name="first"></el-tab-pane>
      <el-tab-pane v-if="!isGlobalModule" label="模型管理" name="second"></el-tab-pane>
    </el-tabs>
    <div style="margin-top: 5px;">
      <el-input v-model="filterText" class="filter-input">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-tree ref="tree" node-key="key" :data="currentTabModelData" :props="defaultProps" default-expand-all
        highlight-current :filter-node-method="filterNode" @node-click="handleNodeClick"
        style="height: 200px; overflow-y: auto">
        <span class="tree-node-list" slot-scope="{ data }">
          <div class="text">
            <span role="img" class="appIcon" style="margin-right: 5px">
              <svg-icon class="tree-title" :color="data.type == 0 ? '' : '#9373ee'"
                :icon-class="data.type == 0 ? 'folder' : 'model'" width="16" height="16" />
            </span>
            <span class="tree-title" :title="data.name">
              {{ data.name }}
            </span>
          </div>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import jsonSchemaToolHandle from "@/utils/jsonSchema-tool.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      title: "引用数据模型",
      filterText: null,
      currentNode: null, // 当前节点
      jsonSchemaTool: null,
      defaultProps: {
        children: "children",
        label: "name",
        value: "key",
      },
      globalTreeData: [], // 全局数据模型
      activeTabName: "first", // 当前激活的tab名称
      currentTabModelData: null, // 当前激活的tab的数据模型树
      isSelectRefGlobal: true // 当前选择引用的数据模型是否是全局数据模型
    };
  },
  props: {
    modelDataList: {
      type: Array,
      default: [],
    },
    isGlobalModule: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState({
      treeData: (state) => state.schemaTree.schemaTreeList,
    }),
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.jsonSchemaTool = new jsonSchemaToolHandle(this);
    this.globalTreeData = JSON.parse(localStorage.getItem("globalTreeData"));
    this.currentTabModelData = this.globalTreeData;
    this.init()
  },
  methods: {
    init() {
      this.filterText = null;
      this.currentNode = null;
      this.$nextTick(() => {
        this.$refs["tree"].setCurrentKey(null);
      });
    },
    // 树节点点击事件
    handleNodeClick(data) {
      if (this.jsonSchemaTool.isFolder(data)) {
        this.$nextTick(() => {
          this.$refs["tree"].setCurrentKey(data.id);
        });
        return;
      }
      this.currentNode = data;
      this.$emit("addReferenceModel", this.isSelectRefGlobal, data);
    },
    // 筛选树节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    // tabs点击事件
    handleTabClick() {
      // 如果激活的是全局数据模型
      if (this.activeTabName === "first") {
        this.currentTabModelData = this.globalTreeData;
        this.isSelectRefGlobal = true;
        // 如果激活的是模型管理
      } else if (this.activeTabName === "second") {
        this.currentTabModelData = this.modelDataList
        this.isSelectRefGlobal = false;
      }
      // 清空筛选条件
      this.filterText = null;
    }
  },
};
</script>